<template>
  <div class="record-list" ref="recordListDom" @click.stop>
    <header class="header">
      <span class="title">批改记录</span>
      <img
        src="@/assets/images/single-correct/close.png"
        @click="hiddenRecordList"
      />
    </header>

    <a-select
      v-model:value="correctStatus"
      :options="statusOptions"
      :get-popup-container="() => recordListDom"
      @change="changeCorrectStatus"
    >
    </a-select>

    <div class="filter">
      <a-checkbox v-model:checked="isFilterScore" @change="changeFilterScore"
        >分数筛选</a-checkbox
      >
      <div class="status">
        <div
          class="status-item"
          :class="[
            item.value == currentStatus ? 'status-item-active' : '',
            isFilterScore ? '' : 'disable-filter-score'
          ]"
          v-for="item in status"
          :key="item.value"
          @click="changeStatus(item.value)"
        >
          {{ item.lable }}
        </div>
      </div>
    </div>

    <div class="filter">
      <a-checkbox v-model:checked="isFilterTime" @change="getRecordList(true)"
        >批改时间</a-checkbox
      >
      <div class="range-picker">
        <a-config-provider :locale="zhCN">
          <a-range-picker
            :disabled="!isFilterTime"
            v-model:value="filterDate"
            :separator="'至'"
            :allowClear="false"
            @change="getRecordList(true)"
          >
            <template #suffixIcon></template
          ></a-range-picker>
        </a-config-provider>
      </div>
    </div>

    <div class="table-container">
      <div class="table-header">
        <div class="table-item">编号</div>
        <div class="table-item score">成绩</div>
        <div class="table-item marking-time">
          <span class="time">批改时间</span>
        </div>
      </div>
      <template v-if="recordList.length">
        <div
          class="table-list"
          v-for="(item, index) of recordList"
          :style="{
            backgroundColor:
              item.student_id === nowStudentId ? '#f7f9fd' : '#fff'
          }"
          :key="item.student_id"
          @click="
            selectRemarkStuQts(
              item.student_id,
              getQtsOrder(index),
              item.teacher_correct
            )
          "
        >
          <div class="table-item">{{ getQtsOrder(index) }}</div>
          <div class="table-item score">
            {{ item.student_score }}
          </div>
          <div class="table-item">
            {{ item.update_time }}
          </div>
        </div>
      </template>
      <div class="blank-tip" v-if="requestDone && recordList.length === 0">
        <i></i>
        <p>暂无记录</p>
      </div>
    </div>

    <a-config-provider :locale="zhCN" v-if="pageSetting.total != 0">
      <a-pagination
        v-model:current="pageSetting.currentPage"
        size="small"
        :showSizeChanger="false"
        :total="pageSetting.total"
        @change="pageChange"
      />
    </a-config-provider>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import dayjs from 'dayjs'
import 'dayjs/locale/zh-cn'
import $bus from '@/utils/tools/bus'
import zhCN from 'ant-design-vue/es/locale/zh_CN'
import { correctRecordList } from '@/apis/single-correct/index'
import { useSingleQtsCorrectStore } from '@/stores/single-correct'
const singleQtsCorrectStore = useSingleQtsCorrectStore()

const emit = defineEmits(['hiddenRecordList'])

const recordListDom = ref()
const correctStatus = ref(1) //-1 未选择是否批改或已批改
const statusOptions = [
  { label: '全部', value: 3 },
  { label: '已批', value: 1 },
  { label: '未批', value: 2 }
]
const status = [
  { lable: '全对', value: 1 },
  { lable: '全半对', value: 2 },
  { lable: '全错', value: 3 }
]
const lastStuRecordId = ref()
const currentStatus = ref(-1)
const isFilterScore = ref(false)
const isFilterTime = ref(false)
const filterDate = ref([])
const recordList = ref([])
const nowStudentId = ref()
const requestDone = ref(true)

const pageSetting = reactive({
  total: 0,
  currentPage: 1,
  pageSize: 10
})

onMounted(() => {
  getRecordList(true)
})

const hiddenRecordList = () => {
  emit('hiddenRecordList')
}

const changeCorrectStatus = () => {
  $bus.emit('change-correct-status', correctStatus.value)
  getRecordList(true)
}

const getRecordList = async isCreated => {
  if (isCreated) {
    pageSetting.currentPage = 1
  }
  requestDone.value = false

  let grade_time_start
  let grade_time_end
  if (isFilterTime.value && filterDate.value.length > 0) {
    grade_time_start = dayjs(filterDate.value[0])
      .startOf('day')
      .format('YYYY-MM-DD HH:mm:ss')
    grade_time_end = dayjs(filterDate.value[1])
      .add(1, 'day')
      .startOf('day')
      .format('YYYY-MM-DD HH:mm:ss')
  }

  let res = await correctRecordList({
    task_id: singleQtsCorrectStore.taskId,
    class_id: singleQtsCorrectStore.classId,
    class_type: singleQtsCorrectStore.classType,
    question_id: singleQtsCorrectStore.currentQtsData.question_id,
    item_type: singleQtsCorrectStore.currentQtsData.item_type,
    page: pageSetting.currentPage,
    page_size: pageSetting.pageSize,
    grade_status: correctStatus.value,
    score: isFilterScore.value ? currentStatus.value : undefined,
    grade_time_start,
    grade_time_end
  })
  if (res.code == 1 && res.data?.list?.length > 0) {
    pageSetting.total = res.data.total
    recordList.value = res.data.list.map((v, index) => {
      if (index == 0 && pageSetting.currentPage == 1) {
        lastStuRecordId.value = v.student_id
      }
      let score = v.score == 2 ? '对' : v.score == 1 ? '半对' : '错'
      v.student_score = v.teacher_correct == -1 ? '未批改' : score
      v.update_time =
        v.teacher_correct == -1
          ? '-'
          : dayjs(v.correct_time).format('MM-DD HH:mm')
      return v
    })
  } else {
    pageSetting.total = 0
    recordList.value = []
  }
  requestDone.value = true
}

const changeStatus = data => {
  currentStatus.value = data
  getRecordList(true)
}

const changeFilterScore = () => {
  if (!isFilterScore.value) {
    currentStatus.value = -1
  }
  getRecordList(true)
}

const selectRemarkStuQts = (studentId, order, correctStatus) => {
  nowStudentId.value = studentId
  $bus.emit('select-remark-stu-qts', {
    studentId,
    order,
    correctStatus,
    lastStuRecordId: lastStuRecordId.value
  })
}

const getQtsOrder = index => {
  return (
    pageSetting.total -
    (pageSetting.currentPage - 1) * pageSetting.pageSize -
    index
  )
}

const pageChange = (page, pageSize) => {
  pageSetting.currentPage = page
  pageSetting.pageSize = pageSize
  getRecordList(false)
}
</script>

<style lang="less" scoped>
.record-list {
  position: fixed;
  top: 90px;
  right: 35px;
  z-index: 2;
  width: 350px;
  height: 800px;
  max-height: 85vh;
  background-color: #ffffff;
  box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  cursor: initial;
  display: flex;
  align-items: center;
  flex-direction: column;
  overflow-y: auto;
  .header {
    box-sizing: border-box;
    width: 100%;
    padding: 17px 22px 27px;
    display: flex;
    justify-content: space-between;

    .title {
      font-size: 20px;
      font-weight: bold;
      letter-spacing: 0px;
      color: #181818;
    }
    .close-img {
      display: inline-block;
      width: 20px;
      height: 20px;
      cursor: pointer;
    }
  }

  // antd select组件修改
  :deep(.ant-select-selector) {
    width: 300px;
    height: 45px;
    border-radius: 4px;
  }
  :deep(.ant-select-selector:hover) {
    border-color: #409eff;
  }
  :deep(
      .ant-select-focused:not(.ant-select-disabled).ant-select:not(
          .ant-select-customize-input
        )
        .ant-select-selector
    ) {
    border-color: #409eff;
    box-shadow: rgba(77, 136, 255, 0.2);
  }
  :deep(
      .ant-select-single .ant-select-selector .ant-select-selection-item,
      .ant-select-selection-placeholder,
      .ant-select-selection-item
    ) {
    line-height: 43px;
  }

  :deep(.ant-select-selection-placeholder, .ant-select-selection-item) {
    // font-size: 16px;
    line-height: 43px;
  }
  :deep(.ant-select-selection-search-input) {
    height: 45px;
  }
  :deep(.ant-select-selection-item) {
    font-size: @size-nav2;
  }

  .filter {
    width: 290px;
    margin: 14px auto;
    display: flex;
    align-items: center;
    gap: 10px;

    :deep(.ant-checkbox-wrapper) {
      flex-shrink: 0;
      color: #aaa;
      font-size: @base-size;
    }
    :deep(.ant-input-number) {
      width: auto;
      input {
        width: 60px;
        text-align: center;
        padding-left: 5px;
        padding-right: 5px;
      }
    }

    .range-picker {
      margin-left: @gap;
      .ant-picker {
        padding: 0;
        height: 40px;
        border-radius: 4px;
        border: 1px solid #dcdfe6;
        & > :first-child::before {
          content: '';
          margin: 0 5px;
          margin-top: 5px;
          width: 20px;
          height: 20px;
          background-size: contain;
          background-repeat: no-repeat;
          background-image: url(@/assets/images/single-correct/ic-date.png);
        }
      }
      .ant-picker-focused {
        box-shadow: none;
      }
      :deep(.ant-picker-range-separator) {
        font-size: @small-size;
      }
      :deep(.ant-picker-active-bar) {
        background-color: #409eff;
      }
      :deep(.ant-picker-input > input) {
        font-size: @small-size;
        text-align: center;
      }
    }
    .status {
      width: 100%;
      display: flex;
      justify-content: space-around;
      align-items: center;
      .status-item {
        height: 34px;
        line-height: 32px;
        padding: 0 9px;
        border-radius: 4px;
        border: 1px solid #dcdfe6;
        font-size: 14px;
        cursor: pointer;
        &:hover {
          border: 1px solid #409eff;
        }
      }
      .status-item-active {
        border: 1px solid #409eff;
        background: #e7f3ff;
      }
      .disable-filter-score {
        background: rgb(245, 245, 245);
        cursor: not-allowed;
        &:hover {
          border: 1px solid #dcdfe6;
        }
      }
    }
  }

  .table-container {
    width: 340px;
    margin: 14px auto 10px;
    border: solid 1px #f5f5f5;
    flex: 1;
    overflow-y: scroll;
    .table-header,
    .table-list {
      height: 28px;
      display: flex;
      .table-item {
        flex: 1;
        font-size: 16px;
        color: #646464;
        border: solid 1px #f5f5f5;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .marking-time {
        cursor: pointer;
      }
      .score {
        flex: 0.6;
      }
      .time {
        padding-right: 5px;
      }
    }

    .table-header {
      .table-item {
        color: #181818;
      }
    }

    .table-list {
      position: relative;
      cursor: pointer;

      &:hover {
        background-color: #f7f9fd !important;
      }
    }
    .blank-tip {
      text-align: center;
      padding: 20px 0;
      i {
        display: block;
        width: calc(316px / 1.7);
        height: calc(290px / 1.7);
        margin: 0 auto;
        background: url('@/assets/images/single-correct/blank-tip.png') center
          no-repeat;
        background-size: contain;
      }
      p {
        line-height: 40px;
      }
    }
  }
  :deep(.ant-pagination) {
    margin-bottom: 10px;
  }
}
</style>
